<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--树结构-->
      <el-col :span="4" :xs="24">
        <!-- <div class="app-container-tree-border"> -->
        <el-menu class="el-menu-vertical-demo" @select="handleOpen" background-color="#8897a8" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item v-for="(item, index) in syTypeList" :key="index" :index="item">
            <span slot="title">{{ item }}</span>
          </el-menu-item>
        </el-menu>
        <!-- </div> -->
      </el-col>
      <el-col :span="20" :xs="24">
        <div class="app-container-table-border">
          <div class="echartsBox" style="width: 100%; height: 300px" v-if="gongcbwyt">
            <div class="echartsBoxLeft" id="echartsBoxLeft"></div>
            <div class="echartsBoxRight" id="echartsBoxRight"></div>
          </div>
          <el-table border stripe v-loading="loading" :data="dataList">
            <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
            <el-table-column label="工程部位" align="center" prop="gongcbwyt" show-overflow-tooltip />
            <el-table-column label="墩柱/台身号" header-align="center" align="center" prop="dunztsh" show-overflow-tooltip />
            <el-table-column label="设计保护层厚度" header-align="center" align="center" prop="baohcSjz" show-overflow-tooltip />
            <el-table-column label="测试保护层均值" header-align="center" align="center" prop="cesbhcjz" show-overflow-tooltip />
            <el-table-column label="最大值" header-align="center" align="center" prop="cesbhcMax" show-overflow-tooltip />
            <el-table-column label="最小值" header-align="center" align="center" prop="cesbhcMin" show-overflow-tooltip />
            <el-table-column label="测点起点位置" header-align="center" align="center" prop="cedqdwz" show-overflow-tooltip />
            <el-table-column label="测点详情" header-align="center" align="center" prop="cedDetailStr" show-overflow-tooltip />
            <el-table-column label="合格率" header-align="center" align="center" prop="hegl" show-overflow-tooltip />
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { tstjGcbwList, tstjList } from "@/api/statistics/ysdtjOrBhchd.js";
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
  components: {},
  name: "bhchd",
  data() {
    return {
      // 试验类型列表
      syTypeList: [],
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        syType: undefined,
        deptId: ""
      },
      total: 0,
      dataList: [],
      gongcbwyt: "",
      syTypeId: 30,
      echartsLeft: null,
      echartsRight: null,
      indicator: [],
      seriesDataVos: [],
      buhegNum:0,
      hegNum:0,
    };
  },
  // 监听顶部全局下拉
  computed: {
    ...mapGetters(["deptId"])
  },
  watch: {
    deptId(newValue, oldValue) {
      this.queryParams.deptId = newValue;
      if (this.queryParams.syType) {
        this.getList();
      }
    }
  },
  created() {
    this.queryParams.deptId = this.$store.state.dept.deptId;
    this.getSyTypeTreeList();
  },
  methods: {
    /** 查询试验类型树 */
    getSyTypeTreeList() {
      let param = {
        syTypeId: this.syTypeId,
        deptId: this.queryParams.deptId
      };
      tstjGcbwList(param).then((response) => {
        this.syTypeList = response.data;
      });
    },
    handleOpen(key, keyPath) {
      this.gongcbwyt = key;
      this.getList();
    },

    /** 查询数据报告列表 */
    getList() {
      this.loading = true;
      tstjList({
        gongcbwyt: this.gongcbwyt,
        syTypeId: this.syTypeId,
        deptId: this.queryParams.deptId
      }).then((res) => {
        this.indicator = [];
        this.dataList = res.data.list;
        // this.total = response.total;
        this.loading = false;
        this.seriesDataVos = res.data.seriesDataVos;
        const valLength = res.data.seriesDataVos[0].value.length || 0;
        if (valLength > 6) {
          for (let i = 0; i < valLength; i++) {
            this.indicator.push({});
          }
        } else {
          this.indicator = [{}, {}, {}, {}, {}, {}];
        }
        this.buhegNum = res.data.buhegNum;
        this.hegNum= res.data.hegNum;
        this.$nextTick(() => {
          this.createEchartsLeft();
        });
        this.$nextTick(() => {
          this.createEchartsRight();
        });
      });
    },
    createEchartsLeft() {
      if (null == this.echartsLeft) {
        this.echartsLeft = echarts.init(document.getElementById("echartsBoxLeft"));
      } else {
        this.echartsLeft.clear();
      }
      this.echartsLeft.showLoading();
      this.echartsLeft.setOption({
        title: {
          text: "墩柱保护层示意图"
        },
        radar: {
          // shape: 'circle',
          // indicator: [{}, {}, {}, {}, {}, {}]
          indicator: this.indicator
        },
        // tooltip: {
        //   trigger: "item"
        // },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: this.seriesDataVos
            // data: [
            //   {
            //     value: [2000, 3000],
            //     name: "Allocated Budget"
            //   },
            // ]
          }
        ]
      });
      this.echartsLeft.hideLoading();
    },
    createEchartsRight() {
      if (null == this.echartsRight) {
        this.echartsRight = echarts.init(document.getElementById("echartsBoxRight"));
      } else {
        this.echartsRight.clear();
      }
      this.echartsRight.showLoading();
      this.echartsRight.setOption({
        title: {
          text: "合格率统计饼图"
        },
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            data: [
              { value: this.hegNum, name: "合格数" },
              { value: this.buhegNum, name: "不合格数" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
      this.echartsRight.hideLoading();
    }
  }
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 300px;
  display: flex;
  .echartsBoxLeft {
    width: 49%;
    height: 100%;
  }
  .echartsBoxRight {
    width: 49%;
    height: 100%;
  }
}
</style>
